<template>
	<view class="container">
		<!-- 顶部导航和搜索栏 -->
		<!-- <view class="top-nav">
			<view class="nav-tabs">
				<view class="tab-item active">
					<text class="tab-text">首页</text>
				</view>
				<view class="tab-item">
					<text class="tab-text">附近</text>
				</view>4
			</view>
		</view> -->

		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="search-box">
				<u-search
					v-model="searchKeyword"
					placeholder="搜索商品"
					@search="onSearch"
					@custom="onSearch"
				></u-search>
			</view>
		</view>

		<!-- 轮播图区域 -->
		<view class="banner-section">
			<swiper 
				:autoplay="true" 
				:interval="3000"
				:duration="500"
				:indicator-dots="true"
				indicator-color="rgba(255,255,255,0.6)"
				indicator-active-color="#FF4444"
				@change="onSwiperChange"
				@click="onBannerClick"
				class="banner-swiper"
			>
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="onBannerClick(index)">
					<image :src="item.image" mode="aspectFill" class="banner-image"></image>
					<view class="banner-overlay">
						<text class="banner-title">{{ item.title }}</text>
						<text class="banner-price" v-if="item.price">¥{{ item.price }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>



		<!-- 功能图标网格 -->
		<view class="feature-grid">
			<view class="feature-row">
				<view class="feature-item" v-for="(item, index) in features1" :key="index" @click="onFeatureClick(item)">
					<view class="feature-icon" >
						<image v-if="item.isImage" :src="item.icon" class="feature-image" mode="aspectFit"></image>
						<u-icon v-else :name="item.icon" size="24" color="#fff"></u-icon>
					</view>
					<text class="feature-text">{{item.text}}</text>
				</view>
			</view>
			<view class="feature-row">
				<view class="feature-item" v-for="(item, index) in features2" :key="index" @click="onFeatureClick(item)">
					<view class="feature-icon" >
						<image v-if="item.isImage" :src="item.icon" class="feature-image" mode="aspectFit"></image>
						<u-icon v-else :name="item.icon" size="24" color="#fff"></u-icon>
					</view>
					<text class="feature-text">{{item.text}}</text>
				</view>
			</view>
		</view>

		<!-- 双11促销横幅 -->
		<view class="promotion-banner" @click="onPromotionClick">
			<view class="promotion-left">
				<image class="phone-image" src="/static/first/phones.png" mode="aspectFit"></image>
			</view>
			<view class="promotion-center">
				<text class="promotion-time">31号0点开抢</text>
				<text class="promotion-title">双11狂欢盛典</text>
				<text class="promotion-desc">全场满300减50</text>
			</view>
			<view class="promotion-right">
				<view class="go-btn">
					<text class="go-text">GO</text>
					<u-icon name="clock-fill" size="12" color="#fff"></u-icon>
				</view>
			</view>
		</view>

		<!-- 新人专享福利 -->
		<view class="new-user-section">
			<view class="section-header">
				<u-icon name="gift-fill" size="20" color="#FFD700"></u-icon>
				<text class="section-title">新人专享福利</text>
			</view>
			<scroll-view class="benefits-scroll" scroll-x="true">
				<view class="benefits-container">
					<view class="benefit-item coupon" @click="onCouponClick">
						<view class="coupon-amount">¥100</view>
						<view class="coupon-desc">满200元可用</view>
						<view class="coupon-btn">立即领取 ></view>
					</view>
					<view class="benefit-item product" v-for="(product, index) in newUserProducts" :key="index" @click="onProductClick(product)">
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-price">¥{{product.price}}</text>
							<text class="product-tag" v-if="product.tag">{{product.tag}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商品展示区域 -->
		<view class="products-section">
			<!-- 秒杀专场 -->
			<view class="flash-sale-section" @click="onFlashSaleClick">
				<view class="section-header">
					<view class="header-left">
						<text class="section-title">秒杀专场</text>
						<text class="section-subtitle">好货捡漏,限量秒杀</text>
					</view>
					<view class="header-right">
						<u-icon name="clock-fill" size="20" color="#FF4444"></u-icon>
						<text class="more-text">更多 ></text>
					</view>
				</view>
				<view class="products-grid">
					<view class="product-card" v-for="(product, index) in flashSaleProducts" :key="index" @click="onProductClick(product)">
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<text class="product-title">{{product.title}}</text>
							<view class="price-row">
								<text class="current-price">¥{{product.price}}</text>
								<text class="original-price">¥{{product.originalPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 限时抢购和今日爆款 -->
			<view class="promotion-sections">
				<!-- 限时抢购 -->
				<view class="limited-time-section" @click="onLimitedTimeClick">
					<view class="section-header">
						<text class="section-title">限时抢购</text>
						<text class="section-subtitle">惊喜来袭</text>
					</view>
					<view class="products-row">
						<view class="product-card" v-for="(product, index) in limitedTimeProducts" :key="index" @click="onProductClick(product)">
							<image class="product-image" :src="product.image" mode="aspectFill"></image>
							<view class="product-info">
								<text class="product-title">{{product.title}}</text>
								<text class="current-price">¥{{product.price}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 今日爆款 -->
				<view class="hot-deals-section">
					<view class="section-header">
						<text class="section-title">今日爆款</text>
						<text class="section-subtitle">11点上新</text>
					</view>
					<view class="products-row">
						<view class="product-card" v-for="(product, index) in hotDealsProducts" :key="index" @click="onProductClick(product)">
							<image class="product-image" :src="product.image" mode="aspectFill"></image>
							<view class="product-info">
								<text class="product-title">{{product.title}}</text>
								<text class="current-price">¥{{product.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 为您推荐 -->
		<view class="recommendation-section">
			<view class="recommendation-header">
				<u-icon name="heart-fill" size="16" color="#FF4444"></u-icon>
				<text class="recommendation-text">为您推荐</text>
				<u-icon name="heart-fill" size="16" color="#FF4444"></u-icon>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-container" v-if="goodsList.length > 0 && !loading">
			<view 
				:class="['goods-item', { 'loading-complete': item && item.showAnimation }]" 
				v-for="(item, index) in goodsList.filter(item => item)" 
				:key="getGoodsKey(item, index)"
				@click="onGoodsClick(item, index)"
			>
				<view class="goods-image-container">
					<image 
						:src="(item && item.goodsImg) || (item && item.img) || '/static/logo.png'" 
						class="goods-img" 
						@error="onImageError" 
						@load="onImageLoad" 
						mode="aspectFill"
						:data-goods-id="(item && item.goodsId) || (item && item.id)"
					></image>
					<!-- 图片加载占位符 -->
					<view class="image-placeholder" v-if="item && !item.imageLoaded">
						<u-icon name="image" size="40" color="#ccc"></u-icon>
						<text class="placeholder-text">加载中...</text>
					</view>
					<!-- 商品标签 -->
					<view class="goods-tag" v-if="item && item.goodsKillType === 1">秒杀</view>
					<view class="goods-tag discount" v-else-if="item && item.goodsDiscountType === 1">折扣</view>
					<view class="goods-tag hot" v-else-if="item && item.sales > 1000">热销</view>
				</view>
				<view class="goods-info">
					<text class="goods-title">{{ (item && item.goodsName) || (item && item.title) || '商品名称' }}</text>
					<text class="goods-desc">{{ (item && item.goodsDesc) || (item && item.desc) || '商品描述' }}</text>
					<view class="goods-price-row">
						<text class="goods-price">¥{{ (item && item.goodsPrice) || (item && item.price) || '0.00' }}</text>
						<text class="goods-original-price" v-if="item && item.originalPrice && item.originalPrice !== item.goodsPrice">¥{{ item.originalPrice }}</text>
					</view>
					<view class="goods-meta">
						<text class="goods-sales">销量: {{ (item && item.sales) || 0 }}</text>
						<text class="goods-stock">库存: {{ (item && item.goodsNumber) || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品加载总结 -->
		<view class="goods-summary" v-if="goodsList.length > 0 && !loading">
			<view class="summary-content">
				<u-icon name="checkmark-circle" size="16" color="#4CAF50"></u-icon>
				<text class="summary-text">已加载 {{ goodsList.length }} 件商品</text>
				<text class="summary-total" v-if="total > goodsList.length">，共 {{ total }} 件</text>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && goodsList.length > 0" @click="loadMore">
			<view class="load-more-content">
				<u-icon name="reload" size="16" color="#666"></u-icon>
				<text class="load-more-text">加载更多</text>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="goodsList.length === 0 && !loading">
			<image src="/static/logo.png" class="empty-image" mode="aspectFit"></image>
			<text class="empty-text">暂无商品</text>
			<text class="empty-desc">请稍后再试或刷新页面</text>
			<view class="empty-actions">
				<view class="retry-btn" @click="refreshGoodsList">
					<u-icon name="reload" size="16" color="#FF4444"></u-icon>
					<text class="retry-text">重新加载</text>
				</view>

			</view>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<view class="loading-content">
				<u-icon name="reload" size="20" color="#666" class="loading-icon"></u-icon>
				<text class="loading-text">加载中...</text>
			</view>
			<view class="loading-progress" v-if="goodsList.length > 0 && total > goodsList.length">
				<text class="progress-text">已加载 {{ goodsList.length }} 件商品</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{ width: (goodsList.length / Math.max(total, 1)) * 100 + '%' }"></view>
				</view>
				<text class="progress-percent">{{ Math.round((goodsList.length / Math.max(total, 1)) * 100) }}%</text>
			</view>
			<view class="loading-tips">
				<text class="tip-text">正在从服务器获取最新商品信息...</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				title: '商城应用',

				searchKeyword: '',
				loading: false,
				pageNum: 1,
				pageSize: 10,
				hasMore: true,
				total: 0,
				bannerList: [],
				features1: [
					{ icon: '/static/icons/点赞.png', text: '新品推荐', bgColor: '#FF4444', isImage: true },
					{ icon: '/static/icons/闹钟时间.png', text: '限时折扣', bgColor: '#8B5CF6', isImage: true },
					{ icon: '/static/icons/秒杀.png', text: '秒杀专场', bgColor: '#F59E0B', isImage: true },
					{ icon: '/static/icons/爆店券.png', text: '领券中心', bgColor: '#FF4444', isImage: true },
					{ icon: '/static/icons/日历.png', text: '每日签到', bgColor: '#10B981', isImage: true }
				],
				features2: [
					{ icon: '/static/icons/团购.png', text: '优惠团购', bgColor: '#FF4444', isImage: true },
					{ icon: '/static/icons/火花.png', text: '每日爆款', bgColor: '#FF4444', isImage: true },
					{ icon: '/static/icons/会员.png', text: '会员中心', bgColor: '#F59E0B', isImage: true },
					{ icon: '/static/icons/积分商城.png', text: '积分商城', bgColor: '#8B4513', isImage: true },
					{ icon: '/static/icons/分销中心.png', text: '分销中心', bgColor: '#FF4444', isImage: true }
				],
				newUserProducts: [
					{ 
						image: '/static/logo.png', 
						price: '98',
						tag: ''
					},
					{ 
						image: '/static/logo.png', 
						price: '9.9',
						tag: '新升级'
					},
					{ 
						image: '/static/logo.png', 
						price: '9.9',
						tag: ''
					}
				],
				// 秒杀专场商品
				flashSaleProducts: [
					{
						image: '/static/logo.png',
						title: '影新款刺绣九色眼部彩妆',
						price: '15.5',
						originalPrice: '69',
						tag: '秒杀'
					},
					{
						image: '/static/logo.png',
						title: '单色高光钻石高光粉脸部',
						price: '39',
						originalPrice: '99',
						tag: '秒杀'
					},
					{
						image: '/static/logo.png',
						title: '新款夹棉保暖羊毛长款毛呢',
						price: '448',
						originalPrice: '5269',
						tag: '秒杀'
					}
				],
				// 限时抢购商品
				limitedTimeProducts: [
					{
						image: '/static/logo.png',
						title: '双排扣西装外套',
						price: '315',
						tag: '限时'
					},
					{
						image: '/static/logo.png',
						title: '抽纸6包装',
						price: '9.5',
						tag: '限时'
					}
				],
				// 今日爆款商品
				hotDealsProducts: [
					{
						image: '/static/logo.png',
						title: '羽绒服外套',
						price: '537',
						tag: '爆款'
					},
					{
						image: '/static/logo.png',
						title: '条纹毛呢外套',
						price: '520',
						tag: '爆款'
					}
				],
				goodsList: []

			}
		},

		// 生命周期
		onLoad() {
			// 显示加载提示
			uni.showLoading({
				title: '加载中...'
			});
			
			// 清理旧的存储数据，避免累积问题
			this.clearGoodsStorage();
			
			// 初始化轮播图
			this.updateBannerList();
			
			// 尝试从本地存储恢复商品数据
			this.restoreGoodsFromStorage();
			
			// 加载商品列表
			this.loadGoodsList();
			// 加载秒杀商品
			this.loadFlashSaleGoods();
			// 加载热门商品
			this.loadHotGoods();
			
			// 确保loading状态在页面加载完成后被重置
			setTimeout(() => {
				this.loading = false;
				uni.hideLoading();
			}, 5000); // 5秒后强制重置
		},
		onPullDownRefresh() {
			this.refreshGoodsList()
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.loadMore()
			}
		},
		onUnload() {
			// 页面卸载时清理数据
			console.log('页面卸载，清理商品数据');
			try {
				uni.removeStorageSync('goodsList');
				uni.removeStorageSync('goodsTotal');
				uni.removeStorageSync('goodsHasMore');
				uni.removeStorageSync('goodsPageNum');
				uni.removeStorageSync('goodsPageSize');
				uni.removeStorageSync('goodsSearchKeyword');
				// 不清理loading状态，因为我们已经不保存它了
				// uni.removeStorageSync('goodsLoading');
			} catch (error) {
				console.error('清理本地存储失败:', error);
			}
		},
		// 方法
		methods: {
			
			goToBalance() {
				uni.navigateTo({
					url: '/pages/balance/balance'
				});
			},
			goTocoupon(){
				uni.navigateTo({
					url:'/pages/coupon/coupon'
				});
			},
			goTomycollect(){
				uni.navigateTo({
					url:'/pages/my-collect/my-collect'
				});
			},
			goToCategory() {
				uni.navigateTo({
					url: '/pages/category/category'
				});
			},
			goToProductDetail() {
				uni.navigateTo({
					url: '/pages/product/detail'
				});
			},
			onBannerClick(index) {
				const bannerItem = this.bannerList[index];
				if (bannerItem && bannerItem.goodsId) {
					// 如果轮播图项有商品ID，跳转到商品详情
					this.onGoodsClick({
						goodsId: bannerItem.goodsId,
						goodsName: bannerItem.title,
						goodsPrice: bannerItem.price
					});
				} else {
					// 否则显示默认提示
					uni.showToast({
						title: `点击了轮播图${index + 1}`,
						icon: 'none'
					});
				}
			},
			onSwiperChange(e) {
				// 轮播图切换事件
				//0console.log('轮播图切换到第', e.detail.current + 1, '张');
			},
			onFeatureClick(item) {
				switch(item.text) {
					case '新品推荐':
						uni.navigateTo({
							url: '/pages/new-products/new-products'
						});
						break;
					case '限时折扣':
						uni.navigateTo({
							url: '/pages/limited-discount/limited-discount'
						});
						break;
					case '秒杀专场':
						uni.navigateTo({
							url: '/pages/flash-sale/flash-sale'
						});
						break;
					case '领券中心':
						uni.navigateTo({
							url: '/pages/getCouponCenter/getCouponCenter',
							icon: 'none'
						});
						break;
					case '每日签到':
						uni.navigateTo({
							url: '/pages/dailyMission/dailyMission',
							icon: 'none'
						});
						break;
					case '优惠团购':
						uni.navigateTo({
							url: '/pages/groupBuy/groupBuy',
							icon: 'none'
						});
						break;
					case '每日爆款':
						uni.navigateTo({
							url: '/pages/dailyHotDeals/dailyHotDeals',
							icon: 'none'
						});
						break;
					case '会员中心':
						uni.navigateTo({
							url: '/pages/member/member',
							icon: 'none'
						});
						break;
					case '积分商城':
						uni.navigateTo({
							url: '/pages/integralMall/integralMall',
							icon: 'none'
						});
						break;
					case '分销中心':
						uni.navigateTo({
							url: '/pages/affiliateApplication/affiliateApplication',
							icon: 'none'
						});
						break;
					default:
						uni.showToast({
							title: `点击了${item.text}`,
							icon: 'none'
						});
				}
			},
			onPromotionClick() {
				uni.showToast({
					title: '双11活动即将开始',
					icon: 'none'
				});
			},
			onCouponClick() {
				uni.showToast({
					title: '优惠券领取成功',
					icon: 'success'
				});
			},
			onProductClick(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}`
				});
			},
			onLimitedTimeClick() {
				uni.navigateTo({
					url: '/pages/limited-discount/limited-discount'
				});
			},
			onFlashSaleClick() {
				uni.navigateTo({
					url: '/pages/flash-sale/flash-sale'
				});
			},
			onNavClick(type) {
				uni.showToast({
					title: `切换到${type}`,
					icon: 'none'
				});
			},
			onImageError(e) {
				// 图片加载失败时的处理
				console.log('图片加载失败:', e);
				// 设置默认图片
				e.target.src = '/static/logo.png';
				// 标记图片已加载（即使是默认图片）
				this.$set(this.goodsList[this.getGoodsIndex(e)], 'imageLoaded', true);
			},
			onImageLoad(e) {
				
				
				// 标记图片已加载
				this.$set(this.goodsList[this.getGoodsIndex(e)], 'imageLoaded', true);
			},
			
			// 获取商品在列表中的索引
			getGoodsIndex(e) {
				const goodsId = e.target.dataset.goodsId;
				return this.goodsList.findIndex(item => item.goodsId === goodsId);
			},
			
			// 更新轮播图数据
			updateBannerList() {
				if (this.goodsList && this.goodsList.length > 0) {
					// 获取最近的三件商品
					const recentGoods = this.goodsList.slice(0, Math.min(3, this.goodsList.length));
					
					this.bannerList = recentGoods.map(item => ({
						image: item.goodsImg || item.img || '/static/logo.png',
						title: item.goodsName || item.title || '商品名称',
						price: item.goodsPrice || item.price || '0.00',
						goodsId: item.goodsId || item.id
					}));
				} else {
					// 如果没有商品，使用默认轮播图
					this.bannerList = [
						{
							image: '/static/logo.png',
							title: '欢迎来到商城',
							price: ''
						},
						{
							image: '/static/logo.png',
							title: '精选好物',
							price: ''
						},
						{
							image: '/static/logo.png',
							title: '限时优惠',
							price: ''
						}
					];
				}
			},
			
			// 显示加载完成的庆祝动画
			showLoadingCompleteAnimation() {
				// 为每个商品添加动画状态，使用数据驱动而不是DOM操作
				this.$nextTick(() => {
					// 先重置所有商品的动画状态
					this.goodsList.forEach(item => {
						this.$set(item, 'showAnimation', false);
					});
					
					// 然后依次触发动画，创造波浪效果
					this.goodsList.forEach((item, index) => {
						setTimeout(() => {
							this.$set(item, 'showAnimation', true);
						}, index * 80); // 稍微加快动画速度
					});
				});
			},
			
					// 加载商品列表
		async loadGoodsList() {
			if (this.loading) return;
			
			this.loading = true;
			try {
				console.log('开始加载商品列表...');
				console.log('请求参数:', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					goodsName: this.searchKeyword
				});
				
				// 从后端获取商品数据
				const response = await this.callGoodsApi();
				console.log('商品API响应:', response);
				
				// 验证API响应数据
				if (response && response.rows && Array.isArray(response.rows) && response.rows.length > 0) {
					const newGoods = response.rows;
					console.log('获取到商品数量:', newGoods.length);
					
					// 处理商品数据，确保字段映射正确
					const processedGoods = newGoods.map(goods => {
						// 验证每个商品对象
						if (!goods) {
							console.warn('跳过空商品对象');
							return null;
						}
						
						return {
							goodsId: goods.goodsId || goods.id || goods.goodId || Math.random().toString(36).substr(2, 9),
							goodsName: goods.goodsName || goods.title || goods.name || '商品名称',
							goodsDesc: goods.goodsDesc || goods.desc || goods.description || '商品描述',
							goodsPrice: goods.goodsPrice || goods.price || goods.sellingPrice || '0.00',
							originalPrice: goods.goodsDiscount || goods.originalPrice || goods.marketPrice || goods.goodsPrice || '0.00',
							goodsImg: goods.goodsImg || goods.img || goods.image || goods.pic || '/static/logo.png',
							sales: goods.sales || goods.soldCount || goods.sold || 0,
							goodsNumber: goods.goodsNumber || goods.stock || goods.inventory || 0,
							goodsStatus: goods.goodsStatus || goods.status || 1,
							goodsKillType: goods.goodsKillType || goods.killType || goods.isKill || 0,
							goodsDiscountType: goods.goodsDiscountType || goods.discountType || goods.isDiscount || 0,
							imageLoaded: false, // 添加图片加载状态
							showAnimation: false // 添加动画状态
						};
					}).filter(goods => goods !== null); // 过滤掉空对象
					
					console.log('处理后的商品数量:', processedGoods.length);
					
					if (processedGoods.length > 0) {
						// 第一页时重置列表，其他页追加
						if (this.pageNum === 1) {
							this.goodsList = processedGoods;
							console.log('第一页加载，重置商品列表，数量:', processedGoods.length);
						} else {
							// 检查是否重复添加
							const existingIds = this.goodsList.map(item => item.goodsId);
							const newGoods = processedGoods.filter(item => !existingIds.includes(item.goodsId));
							this.goodsList = [...this.goodsList, ...newGoods];
							console.log('追加商品，新增数量:', newGoods.length, '总数量:', this.goodsList.length);
						}
						
						this.total = response.total || response.count || 0;
						this.hasMore = this.goodsList.length < this.total;
						
						console.log('商品列表更新完成，总数:', this.total, '当前数量:', this.goodsList.length);
						
						// 保存商品数据到本地存储
						this.saveGoodsToStorage();
						
						// 显示成功提示
						if (this.pageNum === 1) {
							uni.showToast({
								title: `成功加载${processedGoods.length}件商品`,
								icon: 'success',
								duration: 1500
							});
							
							// 如果是第一页且有商品，显示商品总数
							if (this.total > 0) {
								setTimeout(() => {
									uni.showToast({
										title: `共找到${this.total}件商品`,
										icon: 'none',
										duration: 2000
									});
								}, 1500);
							}
							
							// 更新轮播图数据
							this.updateBannerList();
							
							// 添加加载完成的庆祝效果
							this.showLoadingCompleteAnimation();
							
							// 显示加载完成提示
							setTimeout(() => {
								uni.showToast({
									title: '商品加载完成！',
									icon: 'success',
									duration: 2000
								});
							}, 2000);
						}
					} else {
						console.log('处理后的商品数据为空，使用模拟数据');
						console.log('原始商品数据:', newGoods);
						this.loadMockGoods();
					}
				} else {
					console.log('后端接口返回数据为空或格式不正确，使用模拟数据');
					console.log('响应数据结构:', response);
					this.loadMockGoods();
				}
			} catch (error) {
				console.error('加载商品失败:', error);
				// 显示错误提示
				uni.showToast({
					title: '加载商品失败，使用模拟数据',
					icon: 'none',
					duration: 2000
				});
				
				// 加载失败时使用模拟数据
				this.loadMockGoods();
			} finally {
				// 在finally块中重置loading状态
				this.loading = false;
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}
		},
			
			// 调用后端商品接口
			async callGoodsApi() {
				try {
					console.log('=== 开始调用商品API ===');
					// 动态导入API，避免页面加载错误
					const { goodsApi } = await import('../../utils/goodsApi.js');
					console.log('goodsApi导入成功:', goodsApi);
					
					const params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						goodsStatus: 1 // 只加载上架的商品
					};
					
					console.log('调用商品API，参数:', params);
					console.log('开始调用goodsApi.getGoodsList...');
					const result = await goodsApi.getGoodsList(params);
					console.log('商品API原始结果:', result);
					
					// 验证API返回结果
					if (!result) {
						console.warn('API返回null或undefined');
						return null;
					}
					
					// 检查返回的数据结构
					if (typeof result === 'object') {
						console.log('API返回的是对象，检查结构...');
						// 如果直接返回的是商品数组
						if (Array.isArray(result)) {
							return {
								rows: result,
								total: result.length,
								count: result.length
							};
						}
						
						// 如果返回的是标准格式
						if (result.rows || result.data || result.list) {
							return {
								rows: result.rows || result.data || result.list || [],
								total: result.total || result.count || result.totalCount || 0,
								count: result.count || result.totalCount || 0
							};
						}
						
						// 如果返回的是其他格式，尝试适配
						console.log('API返回格式不标准，尝试适配:', result);
						return {
							rows: result.rows || result.data || result.list || result.goods || [],
							total: result.total || result.count || result.totalCount || result.totalNum || 0,
							count: result.count || result.totalCount || result.totalNum || 0
						};
					}
					
					console.warn('API返回格式无法识别:', result);
					return null;
				} catch (error) {
					console.error('API调用失败:', error);
					
					// 显示具体的错误信息
					if (error.message) {
						console.error('错误详情:', error.message);
					}
					
					// 如果是网络错误
					if (error.errMsg && error.errMsg.includes('request:fail')) {
						console.error('网络请求失败，可能是后端服务不可用');
					}
					
					return null;
				}
			},
			
			// 加载模拟商品数据 - 已清空
			loadMockGoods() {
				console.log('模拟数据已清空，不再加载模拟商品');
				// 显示提示信息
				uni.showToast({
					title: '暂无商品数据',
					icon: 'none',
					duration: 2000
				});
				
				// 清空商品列表
				this.goodsList = [];
				this.total = 0;
				this.hasMore = false;
				
				// 保存空数据到本地存储
				this.saveGoodsToStorage();
				
				// 显示提示信息
				uni.showToast({
					title: '暂无商品数据',
					icon: 'none',
					duration: 2000
				});
			},
			
			// 刷新商品列表
			refreshGoodsList() {
				this.pageNum = 1;
				this.hasMore = true;
				this.loadGoodsList();
			},
			
			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.pageNum++;
					this.loadGoodsList();
				}
			},
			
			// 搜索商品
			async onSearch() {
				if (this.searchKeyword.trim()) {
					console.log('搜索关键词:', this.searchKeyword, '准备跳转到搜索结果页面');
					// 跳转到搜索结果页面
					uni.navigateTo({
						url: `/pages/search-result/search-result?keyword=${encodeURIComponent(this.searchKeyword)}`,
						success: () => {
							console.log('跳转到搜索结果页面成功');
						},
						fail: (err) => {
							console.error('跳转到搜索结果页面失败:', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 没有搜索关键词，重置并加载所有商品
					this.pageNum = 1;
					this.hasMore = true;
					this.loadGoodsList();
				}
			},
			
			// 获取商品key值
			getGoodsKey(item, index) {
				if (item) {
					const goodsId = item.goodsId || item.id || item.goodId;
					if (goodsId) {
						return goodsId;
					}
				}
				return index;
			},
			
			// 点击商品 - 和轮播图一样的逻辑
			onGoodsClick(goods, index) {
				// 获取商品ID，支持多种字段名
				const goodsId = goods && (goods.goodsId || goods.id || goods.goodId);
				
				if (goodsId) {
					// 如果商品有商品ID，跳转到商品详情
					uni.navigateTo({
						url: `/pages/product/detail?id=${goodsId}`
					});
				} else {
					// 否则显示默认提示
					uni.showToast({
						title: `点击了商品${index + 1}`,
						icon: 'none'
					});
				}
			},
			

			
			// 加载秒杀商品
			async loadFlashSaleGoods() {
				try {
					const { goodsApi } = await import('../../utils/goodsApi.js');
					const result = await goodsApi.getFlashSaleGoods({ pageSize: 3 });
					
					if (result && result.rows) {
						this.flashSaleProducts = result.rows.map(goods => {
							// 安全地获取商品ID，支持多种字段名
							const goodsId = goods && (goods.goodsId || goods.id || goods.goodId);
							if (!goodsId) {
								console.warn('秒杀商品ID缺失:', goods);
								return null;
							}
							
							return {
								id: goodsId,
								image: goods.goodsImg || goods.img || '/static/logo.png',
								title: goods.goodsName || goods.title || goods.name || '商品名称',
								price: goods.goodsMiaosha || goods.goodsPrice || goods.price || '0.00',
								originalPrice: goods.goodsPrice || goods.price || '0.00',
								tag: '秒杀'
							};
						}).filter(item => item !== null); // 过滤掉无效的商品
					}
				} catch (error) {
					console.error('加载秒杀商品失败:', error);
				}
			},
			
			// 加载热门商品
			async loadHotGoods() {
				try {
					const { goodsApi } = await import('../../utils/goodsApi.js');
					const result = await goodsApi.getHotGoods({ pageSize: 4 });
					
					if (result && result.rows) {
						this.hotDealsProducts = result.rows.map(goods => {
							// 安全地获取商品ID，支持多种字段名
							const goodsId = goods && (goods.goodsId || goods.id || goods.goodId);
							if (!goodsId) {
								console.warn('热门商品ID缺失:', goods);
								return null;
							}
							
							return {
								id: goodsId,
								image: goods.goodsImg || goods.img || '/static/logo.png',
								title: goods.goodsName || goods.title || goods.name || '商品名称',
								price: goods.goodsPrice || goods.price || '0.00',
								tag: '爆款'
							};
						}).filter(item => item !== null); // 过滤掉无效的商品
					}
				} catch (error) {
					console.error('加载热门商品失败:', error);
				}
			},
			// 尝试从本地存储恢复商品数据
			restoreGoodsFromStorage() {
				try {
					const goodsList = uni.getStorageSync('goodsList');
					const savedSearchKeyword = uni.getStorageSync('goodsSearchKeyword') || '';
					
					// 只有在没有搜索关键词时才恢复商品数据
					if (goodsList && (!savedSearchKeyword || !savedSearchKeyword.trim())) {
						this.goodsList = goodsList;
						this.total = uni.getStorageSync('goodsTotal') || 0;
						this.hasMore = uni.getStorageSync('goodsHasMore') || true;
						this.pageNum = uni.getStorageSync('goodsPageNum') || 1;
						this.pageSize = uni.getStorageSync('goodsPageSize') || 10;
						this.searchKeyword = ''; // 重置搜索关键词
						this.loading = false;
						console.log('从本地存储恢复商品数据，当前商品数量:', this.goodsList.length);
					} else {
						console.log('跳过本地存储恢复，当前有搜索关键词或存储数据无效');
						// 清空搜索关键词，确保下次正常加载
						this.searchKeyword = '';
					}
				} catch (error) {
					console.error('从本地存储恢复商品数据失败:', error);
					// 出错时清空搜索关键词
					this.searchKeyword = '';
				}
			},
			
			// 保存商品数据到本地存储
			saveGoodsToStorage() {
				try {
					// 只有在非搜索状态下才保存商品列表
					if (!this.searchKeyword || !this.searchKeyword.trim()) {
						uni.setStorageSync('goodsList', this.goodsList);
						uni.setStorageSync('goodsTotal', this.total);
						uni.setStorageSync('goodsHasMore', this.hasMore);
						uni.setStorageSync('goodsPageNum', this.pageNum);
						uni.setStorageSync('goodsPageSize', this.pageSize);
						// 不保存搜索关键词，避免影响下次加载
						// uni.setStorageSync('goodsSearchKeyword', this.searchKeyword);
						console.log('商品数据已保存到本地存储，商品数量:', this.goodsList.length);
					} else {
						console.log('搜索状态下不保存商品数据到本地存储');
					}
				} catch (error) {
					console.error('保存商品数据到本地存储失败:', error);
				}
			},
			
			// 清理本地存储的商品数据
			clearGoodsStorage() {
				try {
					uni.removeStorageSync('goodsList');
					uni.removeStorageSync('goodsTotal');
					uni.removeStorageSync('goodsHasMore');
					uni.removeStorageSync('goodsPageNum');
					uni.removeStorageSync('goodsPageSize');
					uni.removeStorageSync('goodsSearchKeyword');
					console.log('本地存储的商品数据已清理');
				} catch (error) {
					console.error('清理本地存储失败:', error);
				}
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 顶部导航 */
.top-nav {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav-tabs {
	display: flex;
	gap: 20rpx;
}

.tab-item {
	padding: 10rpx 20rpx;
	border-radius: 25rpx;
	background-color: rgba(255, 255, 255, 0.2);
}

.tab-item.active {
	background-color: #fff;
}

.tab-text {
	color: #fff;
	font-size: 28rpx;
	font-weight: 500;
}

.tab-item.active .tab-text {
	color: #FF4444;
}

/* 搜索栏 */
.search-container {
	padding: 20rpx 30rpx;
	background-color: #FF4444;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.search-box {
	flex: 1;
}

/* 轮播图区域 */
.banner-section {
	margin: 20rpx 30rpx;
	border-radius: 15rpx;
	overflow: hidden;
}

.banner-swiper {
	height: 300rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

/* 功能图标网格 */
.feature-grid {
	background-color: #fff;
	margin: 20rpx 30rpx;
	padding: 30rpx 20rpx;
	border-radius: 15rpx;
}

.feature-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.feature-row:last-child {
	margin-bottom: 0;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	flex: 1;
}

.feature-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-text {
	font-size: 22rpx;
	color: #333;
	text-align: center;
}

.feature-image {
	width: 40rpx;
	height: 40rpx;
}

/* 促销横幅 */
.promotion-banner {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	margin: 20rpx 30rpx;
	padding: 30rpx;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.promotion-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
	background-size: 100rpx 100rpx;
}

.promotion-left {
	width: 120rpx;
	height: 120rpx;
	margin-right: 20rpx;
}

.phone-image {
	width: 100%;
	height: 100%;
}

.promotion-center {
	flex: 1;
	color: #fff;
}

.promotion-time {
	font-size: 24rpx;
	opacity: 0.8;
	display: block;
	margin-bottom: 10rpx;
}

.promotion-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.promotion-desc {
	font-size: 26rpx;
	opacity: 0.9;
}

.promotion-right {
	width: 80rpx;
}

.go-btn {
	width: 60rpx;
	height: 60rpx;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5rpx;
}

.go-text {
	color: #fff;
	font-size: 20rpx;
	font-weight: bold;
}

/* 新人专享福利 */
.new-user-section {
	background-color: #fff;
	margin: 20rpx 30rpx;
	padding: 30rpx;
	border-radius: 15rpx;
}

.new-user-section .section-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.benefits-scroll {
	width: 100%;
}

.benefits-container {
	display: flex;
	gap: 20rpx;
	padding-right: 20rpx;
}

.benefit-item {
	min-width: 200rpx;
	height: 280rpx;
	border-radius: 15rpx;
	overflow: hidden;
	position: relative;
}

.benefit-item.coupon {
	background: linear-gradient(135deg, #F5F5DC, #DEB887);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
}

.coupon-amount {
	font-size: 48rpx;
	font-weight: bold;
	color: #FF4444;
	margin-bottom: 10rpx;
}

.coupon-desc {
	font-size: 22rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.coupon-btn {
	background-color: #FF8C00;
	color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.benefit-item.product {
	background-color: #f8f8f8;
}

.product-image {
	width: 100%;
	height: 200rpx;
}

.product-info {
	padding: 15rpx;
}

.product-price {
	font-size: 28rpx;
	font-weight: bold;
	color: #FF4444;
	display: block;
}

.product-tag {
	font-size: 20rpx;
	color: #FF8C00;
	background-color: #FFF3CD;
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
	margin-top: 10rpx;
	display: inline-block;
}

/* 商品展示区域 */
.products-section {
	margin: 20rpx 30rpx;
}

/* 秒杀专场 */
.flash-sale-section {
	background-color: #fff;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.header-left {
	display: flex;
	flex-direction: column;
	gap: 5rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-subtitle {
	font-size: 24rpx;
	color: #999;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.more-text {
	font-size: 24rpx;
	color: #666;
}

.products-grid {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.product-card {
	display: flex;
	gap: 20rpx;
	background-color: #f8f8f8;
	border-radius: 10rpx;
	padding: 20rpx;
	transition: all 0.2s ease;
}

.product-card:active {
	transform: scale(0.98);
	background-color: #f0f0f0;
}

.product-card .product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	object-fit: cover;
}

.product-card .product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-title {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.price-row {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.current-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #FF4444;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

/* 限时抢购和今日爆款 */
.promotion-sections {
	display: flex;
	gap: 20rpx;
}

.limited-time-section,
.hot-deals-section {
	flex: 1;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.products-row {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.products-row .product-card {
	background-color: #f8f8f8;
	border-radius: 10rpx;
	padding: 15rpx;
}

.products-row .product-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
}

.products-row .product-title {
	font-size: 24rpx;
	margin-bottom: 8rpx;
}

.products-row .current-price {
	font-size: 28rpx;
}

/* 为您推荐 */
.recommendation-section {
	background-color: #fff;
	margin: 20rpx 30rpx;
	border-radius: 15rpx;
	padding: 30rpx;
	text-align: center;
}

.recommendation-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15rpx;
}

.recommendation-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}
.goods-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  margin: 0 30rpx 20rpx 30rpx;
  border-radius: 15rpx;
}



.goods-item {
  width: 48%; /* 一行放两个，留出间距 */
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.goods-item:nth-child(1) { animation-delay: 0.1s; }
.goods-item:nth-child(2) { animation-delay: 0.2s; }
.goods-item:nth-child(3) { animation-delay: 0.3s; }
.goods-item:nth-child(4) { animation-delay: 0.4s; }
.goods-item:nth-child(5) { animation-delay: 0.5s; }
.goods-item:nth-child(6) { animation-delay: 0.6s; }

/* 加载完成动画 */
.goods-item.loading-complete {
  animation: loadingComplete 0.5s ease-out;
}

@keyframes loadingComplete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 响应式布局 - 小屏幕设备 */
@media screen and (max-width: 375px) {
  .goods-item {
    width: 100%; /* 小屏幕一行放一个 */
    margin-bottom: 15rpx;
  }
  
  .goods-container {
    padding: 15rpx;
    margin: 0 20rpx 15rpx 20rpx;
  }
}

/* 响应式布局 - 大屏幕设备 */
@media screen and (min-width: 414px) {
  .goods-item {
    width: 48.5%; /* 大屏幕稍微调整间距 */
  }
  
  .goods-container {
    padding: 25rpx;
    margin: 0 40rpx 25rpx 40rpx;
  }
}

.goods-item:active {
  transform: scale(0.98);
}

.goods-image-container {
  position: relative;
  width: 100%;
  height: 200rpx;
  border-radius: 15rpx 15rpx 0 0;
  overflow: hidden;
}

.goods-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.placeholder-text {
  font-size: 22rpx;
  color: #999;
}

.goods-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: rgba(255, 68, 68, 0.9);
  color: #fff;
  font-size: 20rpx;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  z-index: 10;
  font-weight: bold;
}

.goods-tag.discount {
  background-color: #FFD700;
  color: #333;
}

.goods-tag.hot {
  background-color: #FF4444;
  color: #fff;
}

.goods-info {
  padding: 20rpx;
}

.goods-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 80rpx;
}

.goods-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.3;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 64rpx;
}

.goods-price-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 12rpx;
}

.goods-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #FF4444;
}

.goods-original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.goods-meta {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 12rpx;
}

.goods-sales, .goods-stock {
  font-size: 22rpx;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
}

.load-more:active {
  background-color: #f8f8f8;
}

.load-more-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.load-more-text {
  font-size: 28rpx;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 100rpx 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
  display: block;
}

.empty-desc {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
  display: block;
}

.empty-actions {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.retry-btn {
  background-color: #FF4444;
  color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  box-shadow: 0 4rpx 15rpx rgba(255, 68, 68, 0.3);
}

.retry-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(255, 68, 68, 0.3);
}

.retry-text {
  color: #fff;
  font-weight: bold;
}

.mock-btn {
  background-color: #4CAF50;
  color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.3);
}

.mock-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
}

.mock-text {
  color: #fff;
  font-weight: bold;
}

.loading-state {
  text-align: center;
  padding: 50rpx 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.loading-progress {
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #999;
}

.progress-bar {
  width: 80%;
  height: 10rpx;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #FF4444, #FF6666);
  border-radius: 5rpx;
  transition: width 0.3s ease-in-out;
}

.progress-percent {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.loading-tips {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999;
}

/* 商品加载总结 */
.goods-summary {
  text-align: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.summary-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.summary-text {
  font-size: 28rpx;
  color: #666;
}

.summary-total {
  font-size: 28rpx;
  color: #999;
}

/* 商品加载完成动画 */
.goods-item {
  transition: all 0.3s ease-out;
  transform: translateY(20rpx);
  opacity: 0.8;
}

.goods-item.loading-complete {
  transform: translateY(0);
  opacity: 1;
  animation: goodsAppear 0.6s ease-out;
}

@keyframes goodsAppear {
  0% {
    transform: translateY(20rpx) scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-5rpx) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 商品卡片悬停效果 */
.goods-item:active {
  transform: scale(0.98);
  transition: transform 0.1s ease-out;
}

/* 响应式布局优化 */
@media (max-width: 750rpx) {
  .goods-item {
    margin: 15rpx 20rpx;
  }
  
  .goods-container {
    padding: 0 20rpx;
  }
}

@media (min-width: 751rpx) {
  .goods-item {
    margin: 20rpx 30rpx;
  }
  
  .goods-container {
    padding: 0 30rpx;
  }
}



.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10rpx;
  border-radius: 0 0 15rpx 15rpx;
}

.banner-title {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

.banner-price {
  font-size: 24rpx;
  color: #FFD700;
  font-weight: bold;
}


</style>
